.main-container {
  width: 100vw;
  height: 100vh;
  background-color: #eee;
}
.header-container {
  display: flex;
  height: 60px;
  background-color: white;
}
.logo {
  width: 200px;
  height: 60px;
}
.logo-img {
  width: 100%;
  height: 100%;
}

.user-info {
  font-size: x-large;
  margin-left: auto;
  line-height: 60px;
}
.operation-item {
  line-height: 60px;
  padding: 0 20px;
  cursor: pointer;
}
.operation-item:hover {
  background-color: #f5f5f5;
}
.operation-item:active {
  background-color: #ddd;
}
.body-container {
  display: flex;
  height: calc(100vh - 60px);
}
.left {
  width: 200px;
  margin-top: 8px;
  height: calc(100vh - 60px -8px);
  background-color: white;
  overflow: auto;
}
.right {
  width: calc(100vw - 200px);
  height: calc(100vh - 60px);
}

.bread-box {
  width: calc(100vw - 200px - 32px + 8px);
  height: 50px;
  line-height: 50px;
  margin: 8px 0 8px 8px;
  padding: 8px;
  background-color: white;
}

.show-content {
  position: relative;
  background-color: white;
  margin: 8px 0 8px 8px;
  padding: 8px;
  width: calc(100vw - 200px - 32px + 8px);
  height: calc(100vh - 60px - 32px - 50px - 8px - 16px);
  overflow: auto;
}
